<template>
	<view class="padding-rpx_25">
		<view class="bgColor_ffffff padding-rpx_25 flex_column_c_c" style="height: 500rpx;">
			<QS-Button theme="primary" @click="share">点击生成海报</QS-Button>
			<QS-P height="60rpx"></QS-P>
			<text class="QS-text mini color_808080">目前暂时支持APP、H5、微信小程序</text>
			<QS-P height="30rpx"></QS-P>
			<text class="QS-text mini color_808080">微信小程序在模拟器上无效果，请使用真机查看</text>
		</view>
		
		<QS-Canvas setContext></QS-Canvas>
		
		<view class="share-show-box" v-if="shareShow" @tap.stop="shareShow = false;" @touchmove.stop="voidFn">
			<scroll-view scroll-y="true" class="flex_1">
				<view class="flex_column_none_c">
					<QS-P height="128rpx"></QS-P>
					<image :src="shareImage" mode="widthFix" style="width: 506rpx;" @tap.stop="previewImage"></image>
					<QS-P height="25rpx"></QS-P>
				</view>
			</scroll-view>
			<view class="share-show-bot-btns-box" @tap.stop="voidFn">
				<view class="share-show-bot-btn-box">
					<button class="clear-button" open-type="share">
						<view class="padding-rpx_20 border-radius_50" style="background-color: #F0EEEF;">
							<image :src="wxIcon" mode="aspectFill" class="size_44rpx"></image>
						</view>
						<QS-P height="15rpx"></QS-P>
						<text class="QS-text mini">分享好友</text>
					</button>
				</view>
				<view class="share-show-bot-btn-box" @tap.stop="save">
					<view class="padding-rpx_20 border-radius_50" style="background-color: #F0EEEF;">
						<image :src="downloadIcon" mode="aspectFill" class="size_44rpx"></image>
					</view>
					<QS-P height="15rpx"></QS-P>
					<text class="QS-text mini">保存海报</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLogo from '@/static/logo.png';
	import QSUIMPCODE from '@/static/QS-UI-MPCODE.jpg';
	export default {
		data() {
			return {
				shareShow: false,
				shareImage: '',
				wxIcon: ``,
				downloadIcon: ``,
			}
		},
		methods: {
			async share() {
				if(!this.shareImage) {
					uni.$qs.showLoading('请稍后', true);
					try{
						const scale = .5;
						const c = uni.$qs.pageRoots.getPage(this, 'QS-Canvas');
						const result = await c.draw({
							background: {
								height: 10,
								width: 750*scale,
								backgroundColor: '#ffffff'
							},
							drawArray: ({ bgObj, setBgObj, getBgObj } = {})=>{
								return [
									{
										type: 'image',
										url: ``,
										dx: 27*scale,
										dy: 17*scale,
										dHeight: 88*scale,
										dWidth: 72*scale,
										id: 'user-Avator-bg',
									},
									{
										type: 'image',
										url: uniLogo,
										dHeight: 70*scale,
										dWidth: 70*scale,
										circleSet: true,
										allInfoCallback: function ({ drawArray }) {
											const userAvatorbg = drawArray.find(i=>i.id=='user-Avator-bg');
											return {
												dx: userAvatorbg.dx + 1,
												dy: userAvatorbg.dy + 16*scale
											}
										}
									},
									{
										type: 'text',
										text: '取舍',
										color: '#F52F50',
										size: 30*scale,
										lineFeed: {
											maxWidth: 300*scale,
											lineNum: 1
										},
										id: 'user-name',
										allInfoCallback: function ({ drawArray }) {
											const userAvatorbg = drawArray.find(i=>i.id=='user-Avator-bg');
											return {
												dx: userAvatorbg.dx + userAvatorbg.dWidth + 26*scale,
												dy: userAvatorbg.dy + (userAvatorbg.dHeight/2)
											}
										}
									},
									{
										type: 'text',
										text: '邀请你使用QS-UI',
										size: 30*scale,
										allInfoCallback: function ({ drawArray }) {
											let userName = drawArray.filter(i=>i.id=='user-name');
											userName = userName[userName.length - 1];
											return {
												dx: userName.dx + userName.textLength + 4,
												dy: userName.dy
											}
										}
									},
									{
										type: 'fillRect',
										backgroundColor: '#DDDDDD',
										height: 750*scale,
										width: bgObj.width,
										dx: 0,
										dy: 124*scale,
										id: 'product-image',
									},
									{
										type: 'text',
										text: '这是一条商品标题内容这是一条商品标题内容这是一条商品标题内这是一条商品标题内这是一条商品标题内这是一条商品标题内',
										size: 36*scale,
										color: '#000000',
										fontWeight: 'bold',
										dx: 33*scale,
										lineFeed: {
											maxWidth: bgObj.width - 66*scale,
											lastLineMaxWidth: bgObj.width - 66*scale - (150 + 71)*scale - 50*scale,
											lineHeight: 66*scale,
											lineNum: 2
										},
										id: 'product-name',
										allInfoCallback: function({ drawArray }) {
											const productImage = drawArray.find(i=>i.id=='product-image');
											return {
												dy: productImage.dy + productImage.height + 44*scale
											}
										}
									},
									{
										type: 'text',
										text: '￥',
										color: '#F52F50',
										size: 22*scale,
										textBaseline: 'normal',
										dx: 24*scale,
										id: 'price-pre',
										allInfoCallback: function({ drawArray }) {
											let produceName = drawArray.filter(i=>i.id == 'product-name');
											produceName = produceName[produceName.length - 1];
											return {
												dy: produceName.dy + produceName.size / 2 + 32*scale + 70*scale,
											}
										}
									},
									{
										type: 'text',
										text: '0.00',
										color: '#F52F50',
										size: 50*scale,
										textBaseline: 'normal',
										id: 'price',
										allInfoCallback: function({ drawArray }) {
											const pricePre = drawArray.find(i=>i.id == 'price-pre');
											return {
												dx: pricePre.dx + pricePre.textLength + 2,
												dy: pricePre.dy
											}
										}
									},
									{
										type: 'text',
										text: '￥60.00',
										color: '#A3A3A3',
										size: 28*scale,
										textBaseline: 'middle',
										id: 'throughPrice',
										lineThrough: true,
										allInfoCallback: function({ drawArray }) {
											const price = drawArray.find(i=>i.id == 'price');
											return {
												dx: price.dx + price.textLength + 28*scale,
												dy: price.dy - price.size * .4
											}
										}
									},
									{
										type: 'image',
										url: QSUIMPCODE,
										dHeight: 150*scale,
										dWidth: 150*scale,
										id: 'mp-qrcode',
										allInfoCallback: function({ drawArray }) {
											const productImage = drawArray.find(i=>i.id=='product-image');
											setBgObj({ height: productImage.dy + productImage.height + 141*scale + 150*scale + 20 })
											return {
												dx: bgObj.width - 71*scale - 150*scale,
												dy: productImage.dy + productImage.height + 141*scale
											}
										}
									},
									{
										type: 'text',
										text: '与PC端对应的是“购买须知”文案，如下单后，请3天内至...',
										size: 24*scale,
										color: '#484848',
										dx: 25*scale,
										id: 'pay-need-see',
										allInfoCallback: function ({ drawArray }) {
											const mpQrcode = drawArray.find(i=>i.id=='mp-qrcode');
											const dy = mpQrcode.dy + mpQrcode.dHeight + 40*scale;
											setBgObj({ height: dy + 30*scale })
											return {
												dy: dy
											}
										}
									},
									{
										type: 'fillRect',
										backgroundColor: '#000000',
										height: 68*scale,
										width: bgObj.width,
										dx: 0,
										id: 'bot-p',
										allInfoCallback: function() {
											return {
												dy: getBgObj().height
											}
										}
									},
									{
										type: 'text',
										text: 'app名称xxxx · 正品保证',
										size: 26*scale,
										color: '#FFE1BE',
										textAlign: 'center',
										textBaseline: 'middle',
										dx: bgObj.width / 2,
										id: 'bot-text',
										allInfoCallback: function({ drawArray }) {
											const botP = drawArray.find(i=>i.id=='bot-p');
											setBgObj({ height: botP.dy + botP.height })
											return {
												dy: botP.dy + botP.height / 2
											}
										}
									}
								]
							}
						})
						this.shareImage = result.poster.tempFilePath;
						this.onShareAppMessageData = { imageUrl: this.shareImage }
					}catch(e){
						//TODO handle the exception
						uni.$qs.hideLoading();
					}
					uni.$qs.hideLoading();
				}
				
				this.shareShow = true;
				
			},
			save() {
				uni.saveImageToPhotosAlbum({
					filePath: this.shareImage
				})
			},
			previewImage() {
				uni.$qs.previewImage(this.shareImage);
			},
			voidFn() {}
		}
	}
</script>

<style scoped>
	.share-show-box{
		position: fixed;
		z-index: 991;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,.4);
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
	}
	.share-show-bot-btns-box{
		width: 100%;
		height: 220rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		display: flex;
		flex-direction: row;
	}
	.share-show-bot-btn-box{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.clear-button{
		background-color:rgb(255,255,255, 0); //可根据自己的背景颜色自行设置
		border-radius: 0rpx;
		padding:0rpx;
		margin:0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1;
	}

	.clear-button::after{ /*button的边框样式是通过::after方式实现的*/
		border:none;
	}
</style>
